<template>
    <div>
        <div class="imgBox">
            <!-- alt：图片路径失败时替换显示内容 -->
            <img class="img-slide img1" src="../../assets/img/CZimg/轮播图1.png" alt="1">
            <img class="img-slide img2" src="../../assets/img/CZimg/轮播图2.png" alt="2"
                style="display: none;">
            <img class="img-slide img3" src="../../assets/img/CZimg/轮播图3.png" alt="3"
                style="display: none;">
        </div>
        <div class="centes">
            <p class="centes-log">选择你的座驾</p>
            <div class="centes-zuo">
                <div> <img src="../../assets/img/CZimg/座驾1.png" alt=""> <p><button>查看详细</button></p></div>
                <div> <img src="../../assets/img/CZimg/座驾2.png" alt=""> <p><button>查看详细</button></p></div>
                <div> <img src="../../assets/img/CZimg/座驾3.png" alt=""> <p><button>查看详细</button></p></div>
            </div>
            <div class="bag">
                <p class=" bag-gaugao"><span>车行天下</span><br> <span>急速驾驶</span><br>
                    <span>体验推背的快感你来体验</span></p>
                <li class="bag-log"><p>宝马</p> <img
                        src="../../assets/img/CZimg/微信图片_20221105202823.jpg" alt=""
                        style="border-radius: 50%;"></li>
                <li class="bag-log"><p>大众</p> <img
                        src="../../assets/img/CZimg/ca11c7bcfa1b5644dfa5db9bb119099.jpg" alt=""
                        style="border-radius: 50%;"></li>
                <li class="bag-log"><p>奔驰</p><img
                        src="../../assets/img/CZimg/dc8af732125cce2f3d52beeac0f30ab.jpg" alt=""
                        style="border-radius: 50%;"></li>
            </div>
            <div class="tab">
                <div style="width: 100%; height: 600px; " class="tab-center">

                     <!--展开  -->
                    <p class="slide">
                        <span>轿车型号</span>
                        <a href="javascript:showdiv();" id="strHref" class="btn-slide">展开</a>
                    </p>
                     <!-- 轿车型号 -->
                    <div class="chen">     
                        <div class="chen-jsao">
                            <img src="../../assets/img/CZimg//bao1.png" alt="">
                            <p>BMW 1系运动轿车<br>
                                <span>车型售价￥205,800起
                                </span>
                            </p>
                            <button>了解详细</button>
                            <button>预约驾驶</button>
                        </div>
                        <div class="chen-jsao">
                            <img src="../../assets/img/CZimg/bao1.png" alt="">
                            <p>BMW 1系运动轿车<br>
                                <span>车型售价￥205,800起
                                </span>

                            </p>
                            <button>了解详细</button>
                            <button>预约驾驶</button>
                        </div>
                        <div class="chen-jsao">
                            <img src="../../assets/img/CZimg/bao1.png" alt="">
                            <p>BMW 1系运动轿车<br>
                                <span>车型售价￥205,800起
                                </span>

                            </p>
                            <button>了解详细</button>
                            <button>预约驾驶</button>
                        </div>
                        <div class="chen-jsao">
                            <img src="../../assets/img/CZimg/bao1.png" alt="">
                            <p>BMW 1系运动轿车<br>
                                <span>车型售价￥205,800起
                                </span>

                            </p>
                            <button>了解详细</button>
                            <button>预约驾驶</button>
                        </div>         
                    </div>

                    <div id="show" style="display:none;">
                        <div class="chen">     
                            <div class="chen-jsao">
                                <img src="../../assets/img/CZimg/bao1.png" alt="">
                                <p>BMW 1系运动轿车<br>
                                    <span>车型售价￥205,800起
                                    </span>
                                </p>
                                <button>了解详细</button>
                                <button>预约驾驶</button>
                            </div>
                            <div class="chen-jsao">
                                <img src="../../assets/img/CZimg/bao1.png" alt="">
                                <p>BMW 1系运动轿车<br>
                                    <span>车型售价￥205,800起
                                    </span>
    
                                </p>
                                <button>了解详细</button>
                                <button>预约驾驶</button>
                            </div>
                            <div class="chen-jsao">
                                <img src="../../assets/img/CZimg/bao1.png" alt="">
                                <p>BMW 1系运动轿车<br>
                                    <span>车型售价￥205,800起
                                    </span>
    
                                </p>
                                <button>了解详细</button>
                                <button>预约驾驶</button>
                            </div>
                            <div class="chen-jsao">
                                <img src="../../assets/img/CZimg/bao1.png" alt="">
                                <p>BMW 1系运动轿车<br>
                                    <span>车型售价￥205,800起
                                    </span>
    
                                </p>
                                <button>了解详细</button>
                                <button>预约驾驶</button>
                            </div>         
                        </div>
    

                    </div>

                       <!--SUV展开  -->
                       <p class="slide">
                        <span>SUV型号</span>
                        <a href="javascript:showdiv();" id="strHref" class="btn-slide">展开</a>
                    </p>
                    <div class="chen">
                        <div class="chen-jsao">宝马</div>
                        <div class="chen-jsao">宝马</div>
                        <div class="chen-jsao">宝马</div>
                        <div class="chen-jsao">宝马</div>

                    </div>

                    
                       <!--SUV展开  -->
                       <p class="slide">
                        <span>新能元型号</span>
                        <a href="javascript:showdiv();" id="strHref" class="btn-slide">展开</a>
                    </p>
                    <div class="chen">
                        <div class="chen-jsao">宝马</div>
                        <div class="chen-jsao">宝马</div>
                        <div class="chen-jsao">宝马</div>
                        <div class="chen-jsao">宝马</div>

                    </div>
                </div>






                <!-- 大众 -->
                <div style="display: none; width: 100%; height: 600px;"
                    class="tab-center">
                    <div class="chen">
                        <div class="chen-jsao">大众</div>
                        <div class="chen-jsao">大众</div>
                        <div class="chen-jsao">大众</div>
                        <div class="chen-jsao">大众</div>

                    </div>
                    <div class="chen">
                        <div class="chen-jsao">大众</div>
                        <div class="chen-jsao">大众</div>
                        <div class="chen-jsao">大众</div>
                        <div class="chen-jsao">大众</div>

                    </div>
                    <div class="chen">
                        <div class="chen-jsao">大众</div>
                        <div class="chen-jsao">大众</div>
                        <div class="chen-jsao">大众</div>
                        <div class="chen-jsao">大众</div>

                    </div>
                </div>

                 <!-- 奔驰 -->
                <div style="display: none; width: 100%; height: 600px;"
                    class="tab-center">
                    <div class="chen">
                        <div class="chen-jsao">奔驰</div>
                        <div class="chen-jsao">奔驰</div>
                        <div class="chen-jsao">奔驰</div>
                        <div class="chen-jsao">奔驰</div>

                    </div>
                    <div class="chen">
                        <div class="chen-jsao">奔驰</div>
                        <div class="chen-jsao">奔驰</div>
                        <div class="chen-jsao">奔驰</div>
                        <div class="chen-jsao">奔驰</div>

                    </div>
                    <div class="chen">
                        <div class="chen-jsao">奔驰</div>
                        <div class="chen-jsao">奔驰</div>
                        <div class="chen-jsao">奔驰</div>
                        <div class="chen-jsao">奔驰</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
   	/*初始化边界*/
       *{
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
        color: rgb(255, 255, 255);
    }
   
    li{
        /*list-style设定为none可以去除列表前的小圆点*/
        list-style: none;
       
    }

    .bag-log{
        display: inline-block;
        /*relative生成相对定位的元素，相对于其正常位置进行定位。*/
        /* position: relative; */
        /*上下边距为10px，左右边距为50px*/
        padding: 5px 50px;
        background-color: rgba(0, 0, 0, 0.5);
        /*将方框的角变为圆角框*/
      
        margin-top: 10px;

        height: 50px;

    }
    .bag-log img{
     height: 50px;
    }
    /* 背景 */
    .bag{
        background: url("../../assets/img/CZimg/logo.png") -100px no-repeat;
        height: 350px;
        text-align: center;
    }
    .bag li{
        color: rgb(255, 255, 255);
    }


    .centes{
        margin-top: 30px;
        width: 100%;
        height: 500px;
     background-color: #f6f4f4;
       
    }
    .centes .centes-log{
        text-align: center;
      font-size: 28px; 
      color: orange;
    }

    .centes .centes-zuo{
        padding: 10px 50px 10px 50px;
        display: flex;
        justify-content: space-around;
    }
    .centes-zuo img{
       
       width: 300px;
    }

    .centes-zuo button {
        width: 300px;
    }
    .imgBox img {
        width: 100%;
        height: 550px;
    }
    .bag .bag-gaugao{
        color: white;
       padding: 50px;
        margin-right: 80%;
    }
    .bag-gaugao span {
        font-size: 18px;
        color: rgb(255, 255, 255);
        line-height: 60px;
    }



/* 分类 */

.chen-jsao{
    width: 300px;
    height: 270px;
    background-color: aqua;
    
}
.chen {
    padding: 10px 50px 10px 50px;
    display: flex;
    justify-content: space-around;
}
.slide span{
  font-size: 22px;
}
.slide a{
    color: rgb(89, 78, 78);
}
.slide {
    margin-left: 50px;
}

</style>